<template>
  <div class="clean_box">
    <!-- 回到顶部 -->

    <!-- 洁净二科 -->
    <section class="content">
      <div class="model_title">t4环安能耗-洁净科</div>
      <div class="echart_card">
        <div class="card_title">MAU系统运行报告</div>
        <div class="echarts_data items_box">
          <h3 class="clean_title">用电量</h3>
          <div class="items_chart">
            <vechart :options="maulineOptionData" />
          </div>
          <h3 class="clean_title">FAB L20洁净室湿度趋势</h3>
          <div class="items_chart">
            <vechart :options="FABL20OptionData" />
          </div>
          <h3 class="clean_title">FAB L40洁净室湿度趋势</h3>
          <div class="items_chart">
            <vechart :options="FABL40OptionData" />
          </div>
        </div>
      </div>
      <div class="echart_card">
        <p>本期外气状态与MAU的中温和低温冰水用量关系如下：</p>
        <div class="card_title">MAU外气状态与冰水系统用电量趋势分析</div>
        <div class="echarts_data items_chart paddingTop20">
          <vechart :options="mauOutGasOptionData" />
        </div>
        <p>可以看出焓值与冰水用量正向相关，露点温度与冰水用量无明显关系。</p>
      </div>
      <div class="echart_card">
        <div class="card_title">排气系统运行报告</div>
        <div class="echarts_data">
          <h3 class="clean_title">排气用电量与运行台数</h3>
          <div class="items_chart">
            <vechart :options="exhausOptionData" />
          </div>
          <h3 class="clean_title">FAB 特排系统静压</h3>
          <div class="items_chart">
            <vechart :options="fablineOptionData" />
          </div>
          <h3 class="clean_title">FAB 一般排气静压</h3>
          <div class="items_chart">
            <vechart :options="fabnormalOptionData" />
          </div>
          <h3 class="clean_title">MOD 排气系统静压</h3>
          <div class="items_chart">
            <vechart :options="emlineOptionData" />
          </div>
        </div>
      </div>
      <div class="echart_card">
        <p>
          本期内洁净科运转正常，共发生一级报警{{
            cleanList[0].allNum
          }}次，已处理{{ cleanList[0].endNum }}次，处理率{{
            cleanList[0].value
          }}%。
        </p>
        <div class="card_title">洁净科FMCS本期一级报警记录</div>
        <div class="echarts_data paddingTop20">
          <mytable :mydata="tableData"></mytable>
        </div>
      </div>
    </section>
  </div>
</template>
<script>
import ScrollTop from "@/components/ScrollTop";
import apis from "@/api/api.js";
import cleanlineOption from "../jsonmodule/cleanjson/cleanlineOption.json";
import mauHpOption from "../jsonmodule/hpjson/mauHp.json";
import mauOutGasoption from "../jsonmodule/cleanjson/cleanOutGasOption.json";
import mauCleanOption from "../jsonmodule/cleanjson/mauClean.json";
import fabl4Option from "../jsonmodule/cleanjson/fabl4Option.json";
import elcleanbarline from "../jsonmodule/cleanjson/elcleanbarline.json";
import exhaustOption from "../jsonmodule/cleanjson/exhaustOption.json";
import fablineOption from "../jsonmodule/cleanjson/fablineOption.json";
import fabnormalOption from "../jsonmodule/cleanjson/fabnormalOption.json";
export default {
  components: {
    vechart: () => import("@components/charts/Vechart.vue"),
    mytable: () => import("../common/Mytable.vue"),
    ScrollTop,
  },
  data() {
    return {
      cleanList: JSON.parse(localStorage.getItem("cleanList")),
      cleanlineOption: cleanlineOption, //PV 压力曲线配置文件
      elcleanbarline: elcleanbarline, //mau用电量配置文件
      tableData: [], //传给公共表格组件的数据
      mauCleanOption: mauCleanOption, //FABL20配置文件
      fabl4Option: fabl4Option, //FABL40配置文件
      mauOutGasoption: mauOutGasoption, //mau外气状态分析配置文件
      exhaustOption: exhaustOption, //排气用电量与运行台数
      fablineOption: fablineOption, //FAB特排系统静压配置文件
      fabnormalOption: fabnormalOption, //FAB一般排气系统静压配置文件
      pvPressure: {
        dataX: [
          "1月",
          "2月",
          "3月",
          "4月",
          "5月",
          "6月",
          "7月",
          "8月",
          "9月",
          "10月",
          "11月",
          "12月",
        ],
        dataY: [333, 194, 269, 276, 211, 256, 156, 333, 194, 189, 176, 376],
      },
      kWhDewPointTemperatureObj: {}, //MAU系统运行日报
      cleanMaudata: {},
      FABL20Data: {}, //FABL20数据
      FABL40Data: {}, //FABL40数据
      mauOutGasData: {}, //mau外气状态分析数据
      exhaustData: {}, //排气用电量与运行台数数据
      fablineData: {}, //FAB特排系统静压配置文件数据
      ModStaticPressureObj: {}, //MOD排气系统静压
      exitGasNumberAndelectricityObj: {},
      queryFabSpecialDataObj: {}, //FAB特排系统静压接口数据
    };
  },
  created() {
    this.initData();
  },
  methods: {
    fmcsTableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 == 1) {
        return "statistics-warning-row";
      } else {
        return "";
      }
    },
    async initData() {
      //洁净科- mau系统运行日报
      const kWhDewPointTemperatureData = await apis.kWhDewPointTemperature();
      this.kWhDewPointTemperatureObj = kWhDewPointTemperatureData.data.content;
      // console.log(this.kWhDewPointTemperatureObj, "mau系统运行日报");

      //洁净科-FAB L20 || 湿度趋势
      const humidityTrendFABLTwentyData = await apis.humidityTrendFABLTwenty();
      this.FABL20Data = humidityTrendFABLTwentyData.data.content;
      console.log(this.FABL20Data, " FAB L20 || 湿度趋势");

      //洁净科-FAB L40 || 湿度趋势
      const humidityTrendData = await apis.humidityTrend();
      this.FABL40Data = humidityTrendData.data.content;
      console.log(this.FABL40Data, " FAB L40 || 湿度趋势");

      //洁净科-MAU外气状态分析
      const MAUAnalysisOfExternalGasStateData =
        await apis.MAUAnalysisOfExternalGasState();
      this.mauOutGasData = MAUAnalysisOfExternalGasStateData.data.content;
      // console.log(this.mauOutGasData, "MAU外气状态分析");

      //洁净科-排气系统运行日报-排气用电量与运行台数
      const exitGasNumberAndelectricityData =
        await apis.exitGasNumberAndelectricity();
      this.exhaustData = exitGasNumberAndelectricityData.data.content[0];
      // console.log(this.exhaustData, "排气系统运行日报-排气用电量与运行台数");

      //洁净科-FAB特排系统静压
      const queryFabSpecialData = await apis.queryFabSpecial();
      this.queryFabSpecialDataObj = queryFabSpecialData.data.content;
      // console.log(this.queryFabSpecialDataObj, "FAB特排系统静压");

      //洁净科-FAB一般排气静压
      const FABStaticPressureData = await apis.FABStaticPressure();
      this.fablineData = FABStaticPressureData.data.content;
      console.log(this.fablineData, "FAB一般排气静压");

      //洁净科-MOD排气系统静压
      const queryModStaticPressureData = await apis.queryModStaticPressure();
      this.ModStaticPressureObj = queryModStaticPressureData.data.content;
      console.log(this.ModStaticPressureObj, "MOD排气系统静压");

      //洁净科-FMCS报警记录
      const CleanfmcsAlarmRecordData = await apis.fmcsAlarmRecord();
      this.tableData = CleanfmcsAlarmRecordData.data.content.cleanList;
      // console.log(CleanfmcsAlarmRecordData.data.content, "FMCS报警记录");
    },
  },
  computed: {
    //mau运行日报
    maulineOptionData() {
      // return this.elcleanbarline;
      if (
        this.kWhDewPointTemperatureObj &&
        this.kWhDewPointTemperatureObj.time &&
        this.kWhDewPointTemperatureObj.time.length
      ) {
        const formatter = function (value, index) {
          return new Date(Date.parse(value)).switch("yyyy-MM-dd");
        };
        return {
          ...this.elcleanbarline,
          xAxis: {
            ...this.elcleanbarline.xAxis,
            axisLabel: {
              ...this.elcleanbarline.xAxis.axisLabel,
              // formatter: formatter
            },
            data: this.kWhDewPointTemperatureObj.time,
          },
          yAxis: [
            {
              type: "value",
              name: "耗电量(kWh)",
              min: 0,
              max: 20,
              interval: 5,
              axisLabel: {
                formatter: "{value}",
              },
            },
            {
              type: "value",
              name: "温度(℃)",
              min: 0,
              max: 40,
              interval: 10,
              axisLabel: {
                formatter: "{value}",
              },
            },
          ],
          series: [
            {
              ...this.elcleanbarline.series[0],
              data: this.kWhDewPointTemperatureObj.ffukwh,
            },
            {
              ...this.elcleanbarline.series[1],
              data: this.kWhDewPointTemperatureObj.maukwh,
            },
            {
              ...this.elcleanbarline.series[2],
              data: this.kWhDewPointTemperatureObj.waiqi,
            },
            {
              ...this.elcleanbarline.series[3],
              data: this.kWhDewPointTemperatureObj.loud,
            },
          ],
        };
      } else {
        return this.elcleanbarline;
      }
    },
    //MOD排气系统静压
    emlineOptionData() {
      // return this.cleanlineOption;

      if (
        this.ModStaticPressureObj &&
        this.ModStaticPressureObj.time &&
        this.ModStaticPressureObj.time.length
      ) {
        const formatter = function (value, index) {
          return new Date(Date.parse(value)).switch("yyyy-MM-dd");
        };

        return {
          ...this.cleanlineOption,
          xAxis: {
            ...this.cleanlineOption.xAxis,
            axisLabel: {
              ...this.cleanlineOption.xAxis.axisLabel,
              // formatter: formatter
            },
            data: this.ModStaticPressureObj.time,
          },
          series: [
            {
              ...this.cleanlineOption.series[0],
              data: this.ModStaticPressureObj.agroup || [],
            },
            {
              ...this.cleanlineOption.series[1],
              data: this.ModStaticPressureObj.bgroup || [],
            },
            {
              ...this.cleanlineOption.series[2],
              data: this.ModStaticPressureObj.cgroup || [],
            },
          ],
        };
      } else {
        return this.cleanlineOption;
      }
    },
    //FAB L20洁净室湿度趋势
    FABL20OptionData() {
      if (
        this.FABL20Data &&
        this.FABL20Data.time &&
        this.FABL20Data.time.length
      ) {
        const formatter = function (value, index) {
          return new Date(Date.parse(value)).switch("yyyy-MM-dd");
        };

        return {
          ...this.mauCleanOption,
          xAxis: {
            ...this.mauCleanOption.xAxis,
            // axisLabel: {
            //   ...this.mauCleanOption.xAxis.axisLabel
            //   // formatter: formatter
            // },
            data: this.FABL20Data.time,
          },
          series: [
            {
              ...this.mauCleanOption.series[0],
              data: this.FABL20Data.value["FAB L20 IMP区"],
            },
            {
              ...this.mauCleanOption.series[1],
              data: this.FABL20Data.value["FAB L20层 PHOTO区"],
            },
            {
              ...this.mauCleanOption.series[2],
              data: this.FABL20Data.value["FAB L20层ELA区"],
            },
            {
              ...this.mauCleanOption.series[3],
              data: this.FABL20Data.value["FAB L20层CVD区"],
            },
            {
              ...this.mauCleanOption.series[4],
              data: this.FABL20Data.value["MC栋"],
            },
          ],
        };
      } else {
        return this.mauCleanOption;
      }
    },

    FABL40OptionData() {
      // return this.fabl4Option;
      if (
        this.FABL40Data &&
        this.FABL40Data.time &&
        this.FABL40Data.time.length
      ) {
        const formatter = function (value, index) {
          return new Date(Date.parse(value)).switch("yyyy-MM-dd");
        };

        return {
          ...this.fabl4Option,
          xAxis: {
            ...this.fabl4Option.xAxis,
            axisLabel: {
              ...this.fabl4Option.xAxis.axisLabel,
              // show: true,
              // interval: 0,
              // rotate: 45
              //  show: true
              // formatter: formatter
            },
            data: this.FABL40Data.time,
          },
          series: [
            {
              ...this.fabl4Option.series[0],
              data: this.FABL40Data.value["FAB L40 Touch40区"],
            },
            {
              ...this.fabl4Option.series[1],
              data: this.FABL40Data.value["FAB L40 PHOTO区"],
            },
            {
              ...this.fabl4Option.series[2],
              data: this.FABL40Data.value["FAB L40 STR区"],
            },
            {
              ...this.fabl4Option.series[3],
              data: this.FABL40Data.value["FAB L40 CUT区"],
            },
            {
              ...this.fabl4Option.series[4],
              data: this.FABL40Data.value["FAB L40 EL区"],
            },
            {
              ...this.fabl4Option.series[5],
              data: this.FABL40Data.value["MOD L30层"],
            },
            {
              ...this.fabl4Option.series[6],
              data: this.FABL40Data.value["MOD L40层"],
            },
          ],
        };
      } else {
        return this.fabl4Option;
      }
    },
    //MAU外气状态分析
    mauOutGasOptionData() {
      // return this.mauOutGasoption;
      if (
        this.mauOutGasData &&
        this.mauOutGasData.time &&
        this.mauOutGasData.time.length
      ) {
        const formatter = function (value, index) {
          return new Date(Date.parse(value)).switch("yyyy-MM-dd");
        };

        return {
          ...this.mauOutGasoption,
          xAxis: {
            ...this.mauOutGasoption.xAxis,
            axisLabel: {
              ...this.mauOutGasoption.xAxis.axisLabel,
              // formatter: formatter
            },
            data: this.mauOutGasData.time,
          },
          yAxis: [
            {
              type: "value",
              name: "焓值（Kj/Kg）",
              min: 0,
              max: 80,
              interval: 20,
              axisLabel: {
                formatter: "{value}",
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
            },
            {
              type: "value",
              name: "温度（℃）",
              min: 0,
              max: 24,
              interval: 6,
              axisLabel: {
                formatter: "{value} °C",
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
            },
            {
              position: "left",
              offset: 75,
              type: "value",
              name: "电量（万kWh）",
              min: 0,
              max: 40,
              interval: 10,
              axisLabel: {
                formatter: "{value}",
              },
              axisLine: {
                show: false,
              },
              axisTick: {
                show: false,
              },
            },
          ],
          series: [
            {
              ...this.mauOutGasoption.series[0],
              data: this.mauOutGasData.elec,
              itemStyle: {
                normal: {
                  label: {
                    formatter: "{c}" + "(万Kwh)",
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                },
              },
            },
            {
              ...this.mauOutGasoption.series[1],
              data: this.mauOutGasData.enthalpy,
            },
            {
              ...this.mauOutGasoption.series[2],
              data: this.mauOutGasData.dpt,
            },
          ],
        };
      } else {
        return this.mauOutGasoption;
      }
    },
    //排气系统运行日报-排气用电量与运行台数
    exhausOptionData() {
      if (
        this.exhaustData &&
        this.exhaustData.dates &&
        this.exhaustData.dates.length
      ) {
        const formatter = function (value, index) {
          return new Date(Date.parse(value)).switch("yyyy-MM-dd");
        };

        return {
          ...this.exhaustOption,
          xAxis: {
            ...this.exhaustOption.xAxis,
            axisLabel: {
              ...this.exhaustOption.xAxis.axisLabel,
              // formatter: formatter
              // "min": 0,
              // "max": 40000,
              // "interval": 8000,
            },
            data: this.exhaustData.dates,
          },
           yAxis: [
            {
              type: "value",
              name: "台数(台)",
              min: 0,
              max: 50,
              interval: 10,
              axisLabel: {
                formatter: "{value}",
              },
            },
            {
              type: "value",
              name: "电量(万Kwh)",
              min: 0,
              max: 3.5,
              interval: 0.7,
              axisLabel: {
                formatter: "{value}",
              },
            },
          ],
          series: [
            {
              ...this.exhaustOption.series[0],
              barGap: "0%",
              data: this.exhaustData.allNumber,
              itemStyle: {
                normal: {
                  label: {
                    formatter: "{c}" + "(台)",
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                },
              },
            },
            {
              ...this.exhaustOption.series[1],
              data: this.exhaustData.numberList,
              itemStyle: {
                normal: {
                  label: {
                    formatter: "{c}" + "(台)",
                    show: true,
                    position: "top",
                    textStyle: {
                      color: "black",
                      fontSize: 12,
                    },
                  },
                },
              },
            },
            {
              ...this.exhaustOption.series[2],
              data: this.exhaustData.ectricity,
            },
          ],
        };
      } else {
        return this.exhaustOption;
      }
    },
    //FAB特排系统静压
    fablineOptionData() {
      // return this.fablineOption;

      if (
        this.queryFabSpecialDataObj &&
        this.queryFabSpecialDataObj.time &&
        this.queryFabSpecialDataObj.time.length
      ) {
        const formatter = function (value, index) {
          return new Date(Date.parse(value)).switch("yyyy-MM-dd");
        };

        return {
          ...this.fablineOption,
          xAxis: {
            ...this.fablineOption.xAxis,
            axisLabel: {
              ...this.fablineOption.xAxis.axisLabel,
              // formatter: formatter
            },
            data: this.queryFabSpecialDataObj.time,
          },
          series: [
            {
              ...this.fablineOption.series[0],
              data: this.queryFabSpecialDataObj.value["SEX"] || [],
            },
            {
              ...this.fablineOption.series[1],
              data: this.queryFabSpecialDataObj.value["AEX"] || [],
            },
            {
              ...this.fablineOption.series[2],
              data: this.queryFabSpecialDataObj.value["CVD_W"] || [],
            },
            {
              ...this.fablineOption.series[3],
              data: this.queryFabSpecialDataObj.value["CVD_E"] || [],
            },
            {
              ...this.fablineOption.series[4],
              data: this.queryFabSpecialDataObj.value["SEX"] || [],
            },
            {
              ...this.fablineOption.series[5],
              data: this.queryFabSpecialDataObj.value["SEX"] || [],
            },
            {
              ...this.fablineOption.series[6],
              data: this.queryFabSpecialDataObj.value["STR"] || [],
            },
          ],
        };
      } else {
        return this.fablineOption;
      }
    },
    //FAB 一般排气静压
    fabnormalOptionData() {
      if (this.fablineData && this.fablineData.timeList) {
        return {
          ...this.fabnormalOption,
          xAxis: {
            ...this.fabnormalOption.xAxis,
            axisLabel: {
              ...this.fabnormalOption.xAxis.axisLabel,
              // formatter: formatter,
            },
            data: this.fablineData.timeList,
          },
          series: [
            {
              ...this.fabnormalOption.series[0],
              data: this.fablineData.systemIdListA,
            },
            {
              ...this.fabnormalOption.series[1],
              data: this.fablineData.systemIdListB,
            },
            {
              ...this.fabnormalOption.series[2],
              data: this.fablineData.systemIdListC,
            },
            {
              ...this.fabnormalOption.series[3],
              data: this.fablineData.systemIdListD,
            },
          ],
        };
      } else {
        return this.fabnormalOption;
      }

      // return this.fabnormalOption;
    },
  },
};
</script>
<style lang="scss" scoped>
.clean_box {
  // height: 666px;
  // background-color: #bbb;
  .content {
    margin: 0 auto;
    width: 1280px;
    background-color: #eee;
    .model_title {
      width: 100%;
      height: 88px;
      background: url("../../../../../assets/report/ectitle.jpg") no-repeat
        center;
      background-size: cover;
      text-align: center;
      line-height: 88px;
      font-size: 42px;
      font-weight: bold;
      color: #000000;
    }
    .echart_card {
      width: 100%;
      padding: 2% 4.5%;
      .card_title {
        height: 70px;
        width: 100%;
        line-height: 70px;
        padding-left: 48px;
        font-size: 30px;
        background: #5ea9fd;
        border-radius: 15px 15px 0px 0px;
        font-weight: bold;
        color: #ffffff;
      }
      .echarts_data {
        width: 100%;
        // height: 330px;
        background: #ffffff;
        border-radius: 0px 0px 15px 15px;
        .clean_title {
          height: 48px;
          font-size: 24px;
          text-align: center;
          font-weight: bold;
          color: #333333;
          line-height: 48px;
          margin: 0;
          padding: 0;
        }
      }
      p {
        color: #000000;
        font-size: 24px;
      }
      .cc_data {
        border-radius: 0px 0px 15px 15px;
        width: 100%;
        background: #ffffff;
        height: 100px;
        text-align: center;
        line-height: 100px;
        font-size: 40px;
        font-weight: bold;
        color: #333333;
      }
    }
  }
}

.items_chart {
  height: 330px;
}
.paddingTop20 {
  padding: 20px 0;
}
</style>
